<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <meta name="author" content="MkDocs Team">
        <link rel="canonical" href="https://www.mkdocs.org/user-guide/choosing-your-theme/">
        <link rel="shortcut icon" href="../../img/favicon.ico">
        <title>Choosing Your Theme - MkDocs</title>
        <link href="../../css/bootstrap.min.css" rel="stylesheet">
        <link href="../../css/font-awesome.min.css" rel="stylesheet">
        <link href="../../css/base.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/github.min.css">
        <link href="../../css/extra.css" rel="stylesheet">

        <script src="../../js/jquery-1.10.2.min.js" defer></script>
        <script src="../../js/bootstrap.min.js" defer></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/languages/yaml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/languages/django.min.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-274394082"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'G-274394082');
        </script> 
    </head>

    <body>
        <div class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
            <div class="container">
                <a class="navbar-brand" href="../..">MkDocs</a>
                <!-- Expander button -->
                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- Expanded navigation -->
                <div id="navbar-collapse" class="navbar-collapse collapse">
                        <!-- Main navigation -->
                        <ul class="nav navbar-nav">
                            <li class="navitem">
                                <a href="../.." class="nav-link">Home</a>
                            </li>
                            <li class="navitem">
                                <a href="../../getting-started/" class="nav-link">Getting Started</a>
                            </li>
                            <li class="dropdown active">
                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">User Guide <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    
<li>
    <a href="../" class="dropdown-item">Overview</a>
</li>
                                    
<li>
    <a href="../installation/" class="dropdown-item">Installation</a>
</li>
                                    
<li>
    <a href="../writing-your-docs/" class="dropdown-item">Writing Your Docs</a>
</li>
                                    
<li>
    <a href="./" class="dropdown-item active">Choosing Your Theme</a>
</li>
                                    
<li>
    <a href="../customizing-your-theme/" class="dropdown-item">Customizing Your Theme</a>
</li>
                                    
<li>
    <a href="../localizing-your-theme/" class="dropdown-item">Localizing Your Theme</a>
</li>
                                    
<li>
    <a href="../configuration/" class="dropdown-item">Configuration</a>
</li>
                                    
<li>
    <a href="../deploying-your-docs/" class="dropdown-item">Deploying Your Docs</a>
</li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Developer Guide <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    
<li>
    <a href="../../dev-guide/" class="dropdown-item">Overview</a>
</li>
                                    
<li>
    <a href="../../dev-guide/themes/" class="dropdown-item">Themes</a>
</li>
                                    
<li>
    <a href="../../dev-guide/translations/" class="dropdown-item">Translations</a>
</li>
                                    
<li>
    <a href="../../dev-guide/plugins/" class="dropdown-item">Plugins</a>
</li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    
<li>
    <a href="../../about/release-notes/" class="dropdown-item">Release Notes</a>
</li>
                                    
<li>
    <a href="../../about/contributing/" class="dropdown-item">Contributing</a>
</li>
                                    
<li>
    <a href="../../about/license/" class="dropdown-item">License</a>
</li>
                                </ul>
                            </li>
                        </ul>

                    <ul class="nav navbar-nav ml-auto">
                        <li class="nav-item">
                            <a href="#" class="nav-link" data-toggle="modal" data-target="#mkdocs_search_modal">
                                <i class="fa fa-search"></i> Search
                            </a>
                        </li>
                            <li class="nav-item">
                                <a rel="prev" href="../writing-your-docs/" class="nav-link">
                                    <i class="fa fa-arrow-left"></i> Previous
                                </a>
                            </li>
                            <li class="nav-item">
                                <a rel="next" href="../customizing-your-theme/" class="nav-link">
                                    Next <i class="fa fa-arrow-right"></i>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="https://gitee.com/fstongxue/aivideo.git" class="nav-link">Gitee</a>
                            </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                    <div class="col-md-3"><div class="navbar-light navbar-expand-md bs-sidebar hidden-print affix" role="complementary">
    <div class="navbar-header">
        <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#toc-collapse" title="Table of Contents">
            <span class="fa fa-angle-down"></span>
        </button>
    </div>

    
    <div id="toc-collapse" class="navbar-collapse collapse card bg-secondary">
        <ul class="nav flex-column">
            
            <li class="nav-item" data-level="1"><a href="#choosing-your-theme" class="nav-link">Choosing your Theme</a>
              <ul class="nav flex-column">
            <li class="nav-item" data-level="2"><a href="#mkdocs" class="nav-link">mkdocs</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            <li class="nav-item" data-level="2"><a href="#readthedocs" class="nav-link">readthedocs</a>
              <ul class="nav flex-column">
              </ul>
            </li>
            <li class="nav-item" data-level="2"><a href="#third-party-themes" class="nav-link">Third Party Themes</a>
              <ul class="nav flex-column">
              </ul>
            </li>
              </ul>
            </li>
        </ul>
    </div>
</div></div>
                    <div class="col-md-9" role="main">

<h1 id="choosing-your-theme">Choosing your Theme<a class="headerlink" href="#choosing-your-theme" title="Permanent link"></a></h1>
<p>Selecting and configuring a theme.</p>
<hr />
<p>MkDocs includes two built-in themes (<a href="#mkdocs">mkdocs</a> and
<a href="#readthedocs">readthedocs</a>), as documented below. However, many <a href="#third-party-themes">third party
themes</a> are available to choose from as well.</p>
<p>To choose a theme, set the <a href="../configuration/#theme">theme</a> configuration option in your <code>mkdocs.yml</code>
config file.</p>
<pre><code class="language-yaml">theme:
    name: readthedocs
</code></pre>
<h2 id="mkdocs">mkdocs<a class="headerlink" href="#mkdocs" title="Permanent link"></a></h2>
<p>The default theme, which was built as a custom <a href="https://getbootstrap.com/">Bootstrap</a> theme, supports most
every feature of MkDocs.</p>
<p><img alt="mkdocs" src="../../img/mkdocs.png" /></p>
<p>In addition to the default <a href="../configuration/#theme">theme configuration options</a>, the <code>mkdocs</code> theme
supports the following options:</p>
<ul>
<li>
<p><strong><code>highlightjs</code></strong>: Enables highlighting of source code in code blocks using
  the <a href="https://highlightjs.org/">highlight.js</a> JavaScript library. Default: <code>True</code>.</p>
</li>
<li>
<p><strong><code>hljs_style</code></strong>: The highlight.js library provides 79 different <a href="https://highlightjs.org/static/demo/">styles</a>
  (color variations) for highlighting source code in code blocks. Set this to
  the name of the desired style. Default: <code>github</code>.</p>
</li>
<li>
<p><strong><code>hljs_languages</code></strong>: By default, highlight.js only supports 23 common
  languages. List additional languages here to include support for them.</p>
<pre><code>theme:
    name: mkdocs
    highlightjs: true
    hljs_languages:
        - yaml
        - rust
</code></pre>
</li>
<li>
<p><strong><code>analytics</code></strong>: Defines configuration options for an analytics service.
  Currently, only Google Analytics v4 is supported via the <code>gtag</code> option.</p>
<ul>
<li>
<p><strong><code>gtag</code></strong>: To enable Google Analytics, set to a Google Analytics v4
tracking ID, which uses the <code>G-</code> format. See Google's documentation to
<a href="https://support.google.com/analytics/answer/9304153?hl=en&amp;ref_topic=9303319">Set up Analytics for a website and/or app (GA4)</a> or to
<a href="https://support.google.com/analytics/answer/9744165?hl=en&amp;ref_topic=9303319">Upgrade to a Google Analytics 4 property</a>.</p>
<pre><code>theme:
    name: mkdocs
    analytics:
        gtag: G-ABC123
</code></pre>
<p>When set to the default (<code>null</code>) Google Analytics is disabled for the
site.</p>
</li>
</ul>
</li>
<li>
<p><strong><code>shortcuts</code></strong>: Defines keyboard shortcut keys.</p>
<pre><code>theme:
    name: mkdocs
    shortcuts:
        help: 191    # ?
        next: 78     # n
        previous: 80 # p
        search: 83   # s
</code></pre>
<p>All values must be numeric key codes. It is best to use keys which are
available on all keyboards. You may use <a href="https://keycode.info/">https://keycode.info/</a> to determine
the key code for a given key.</p>
<ul>
<li>
<p><strong><code>help</code></strong>: Display a help modal which lists the keyboard shortcuts.
  Default: <code>191</code> (&quest;)</p>
</li>
<li>
<p><strong><code>next</code></strong>: Navigate to the "next" page. Default: <code>78</code> (n)</p>
</li>
<li>
<p><strong><code>previous</code></strong>: Navigate to the "previous" page. Default: <code>80</code> (p)</p>
</li>
<li>
<p><strong><code>search</code></strong>: Display the search modal. Default: <code>83</code> (s)</p>
</li>
</ul>
</li>
<li>
<p><strong><code>navigation_depth</code></strong>: The maximum depth of the navigation tree in the
  sidebar. Default: <code>2</code>.</p>
</li>
<li>
<p><strong><code>nav_style</code></strong>: This adjusts the visual style for the top navigation bar; by
  default, this is set to <code>primary</code> (the default), but it can also be set to
  <code>dark</code> or <code>light</code>.</p>
<pre><code>theme:
    name: mkdocs
    nav_style: dark
</code></pre>
</li>
<li>
<p><strong id="mkdocs-locale"><code>locale</code></strong>: The locale (language/location) used to
  build the theme. If your locale is not yet supported, it will fallback
  to the default.</p>
<p>The following locales are supported by this theme:</p>
<ul>
<li><code>en</code>: English (default)</li>
<li><code>fr</code>: French</li>
<li><code>es</code>: Spanish</li>
</ul>
<p>See the guide on <a href="../localizing-your-theme/">localizing your theme</a> for more information.</p>
</li>
</ul>
<h2 id="readthedocs">readthedocs<a class="headerlink" href="#readthedocs" title="Permanent link"></a></h2>
<p>A clone of the default theme used by the <a href="https://readthedocs.org/">Read the Docs</a> service, which offers
the same restricted feature-set as its parent theme. Like its parent theme, only
two levels of navigation are supported.</p>
<p><img alt="ReadTheDocs" src="../../img/readthedocs.png" /></p>
<p>In addition to the default <a href="../configuration/#theme">theme configuration options</a>, the <code>readthedocs</code>
theme supports the following options:</p>
<ul>
<li>
<p><strong><code>highlightjs</code></strong>: Enables highlighting of source code in code blocks using
  the <a href="https://highlightjs.org/">highlight.js</a> JavaScript library. Default: <code>True</code>.</p>
</li>
<li>
<p><strong><code>hljs_languages</code></strong>: By default, highlight.js only supports 23 common
  languages. List additional languages here to include support for them.</p>
<pre><code>theme:
    name: readthedocs
    highlightjs: true
    hljs_languages:
        - yaml
        - rust
</code></pre>
</li>
<li>
<p><strong><code>analytics</code></strong>: Defines configuration options for an analytics service.
  Currently, only Google Analytics v4 is supported via the <code>gtag</code> option.</p>
<ul>
<li>
<p><strong><code>gtag</code></strong>: To enable Google Analytics, set to a Google Analytics v4
tracking ID, which uses the <code>G-</code> format. See Google's documentation to
<a href="https://support.google.com/analytics/answer/9304153?hl=en&amp;ref_topic=9303319">Set up Analytics for a website and/or app (GA4)</a> or to
<a href="https://support.google.com/analytics/answer/9744165?hl=en&amp;ref_topic=9303319">Upgrade to a Google Analytics 4 property</a>.</p>
<pre><code>theme:
    name: readthedocs
    analytics:
        gtag: G-ABC123
</code></pre>
<p>When set to the default (<code>null</code>) Google Analytics is disabled for the</p>
</li>
</ul>
</li>
<li>
<p><strong><code>include_homepage_in_sidebar</code></strong>: Lists the homepage in the sidebar menu. As
  MkDocs requires that the homepage be listed in the <code>nav</code> configuration
  option, this setting allows the homepage to be included or excluded from
  the sidebar. Note that the site name/logo always links to the homepage.
  Default: <code>True</code>.</p>
</li>
<li>
<p><strong><code>prev_next_buttons_location</code></strong>: One of <code>bottom</code>, <code>top</code>, <code>both</code> , or <code>none</code>.
  Displays the “Next” and “Previous” buttons accordingly. Default: <code>bottom</code>.</p>
</li>
<li>
<p><strong><code>navigation_depth</code></strong>: The maximum depth of the navigation tree in the
  sidebar. Default: <code>4</code>.</p>
</li>
<li>
<p><strong><code>collapse_navigation</code></strong>: Only include the page section headers in the
  sidebar for the current page. Default: <code>True</code>.</p>
</li>
<li>
<p><strong><code>titles_only</code></strong>: Only include page titles in the sidebar, excluding all
  section headers for all pages. Default: <code>False</code>.</p>
</li>
<li>
<p><strong><code>sticky_navigation</code></strong>: If True, causes the sidebar to scroll with the main
  page content as you scroll the page. Default: <code>True</code>.</p>
</li>
<li>
<p><strong id="readthedocs-locale"><code>locale</code></strong>: The locale (language/location) used to
  build the theme. If your locale is not yet supported, it will fallback
  to the default.</p>
<p>The following locales are supported by this theme:</p>
<ul>
<li><code>en</code>: English (default)</li>
<li><code>fr</code>: French</li>
<li><code>es</code>: Spanish</li>
</ul>
<p>See the guide on <a href="../localizing-your-theme/">localizing your theme</a> for more information.</p>
</li>
</ul>
<h2 id="third-party-themes">Third Party Themes<a class="headerlink" href="#third-party-themes" title="Permanent link"></a></h2>
<p>A list of third party themes can be found in the MkDocs <a href="https://github.com/mkdocs/mkdocs/wiki/MkDocs-Themes">community wiki</a>. If you
have created your own, please feel free to add it to the list.</p></div>
            </div>
        </div>

        <footer class="col-md-12">
            <hr>
                <p>Copyright &copy; 2014 <a href="https://twitter.com/_tomchristie">Tom Christie</a>, Maintained by the <a href="/about/release-notes/#maintenance-team">MkDocs Team</a>.</p>
            <p>Documentation built with <a href="https://www.mkdocs.org/">MkDocs</a>.</p>
        </footer>
        <script>
            var base_url = "../..",
                shortcuts = {"help": 191, "next": 78, "previous": 80, "search": 83};
        </script>
        <script src="../../js/base.js" defer></script>
        <script src="../../search/main.js" defer></script>

        <div class="modal" id="mkdocs_search_modal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="searchModalLabel">Search</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            </div>
            <div class="modal-body">
                <p>From here you can search these documents. Enter your search terms below.</p>
                <form>
                    <div class="form-group">
                        <input type="search" class="form-control" placeholder="Search..." id="mkdocs-search-query" title="Type search term here">
                    </div>
                </form>
                <div id="mkdocs-search-results" data-no-results-text="No results found"></div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div><div class="modal" id="mkdocs_keyboard_modal" tabindex="-1" role="dialog" aria-labelledby="keyboardModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="keyboardModalLabel">Keyboard Shortcuts</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            </div>
            <div class="modal-body">
              <table class="table">
                <thead>
                  <tr>
                    <th style="width: 20%;">Keys</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="help shortcut"><kbd>?</kbd></td>
                    <td>Open this help</td>
                  </tr>
                  <tr>
                    <td class="next shortcut"><kbd>n</kbd></td>
                    <td>Next page</td>
                  </tr>
                  <tr>
                    <td class="prev shortcut"><kbd>p</kbd></td>
                    <td>Previous page</td>
                  </tr>
                  <tr>
                    <td class="search shortcut"><kbd>s</kbd></td>
                    <td>Search</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

    </body>
</html>
